<template>
  <div class="page_privacyPwd">
    <van-nav-bar
      :title="(type === 2 ? '重置' : '设置') + '隐私密码'"
      left-arrow
      @click-left="goBack()"
    />
    <van-form @submit="onSubmit">
      <!-- <van-field autocomplete="off" v-model="account" type="number" clearable enter label="手机号" name="account" placeholder="请输入手机号"
                maxlength="11" :rules="[{required: true, message: '请输入手机号'}]"> -->
      <van-field
        autocomplete="off"
        v-model="account"
        type="number"
        readonly
        label="手机号"
        name="account"
      >
        <template #button>
          <van-button
            v-show="showcount"
            size="small"
            type="info"
            :disabled="disabledStatus"
            @click="sendCode(2)"
            native-type="button"
          >发送验证码</van-button>
            <van-button
              v-show="!showcount"
              size="small"
              type="info"
              disabled
              @click="sendCode(2)"
              native-type="button"
            >{{ count }} s</van-button>
        </template>
        </van-field>
        <van-field
          autocomplete="off"
          clearable
          v-model="code"
          type="number"
          name="code"
          label="验证码"
          placeholder="请输入验证码"
          :rules="[{required: true, message: '请填写验证码'}]"
          maxlength="6"
        />
        <van-field
          autocomplete="off"
          clearable
          v-model="privacyPwd"
          type="password"
          name="privacyPwd"
          label="隐私密码"
          placeholder="请输入新的隐私密码"
          :rules="[{required: true, message: '请填写密码'}]"
        />
        <van-field
          autocomplete="off"
          clearable
          v-model="privacyPwd2"
          type="password"
          name="privacyPwd2"
          label="隐私密码"
          placeholder="请再次输入隐私密码"
          :rules="[{required: true, message: '请填写密码'}]"
        />
        <div style="margin: 16px;">
          <van-button
            type="info"
            block
            round
            native-type="submit"
          > {{ type === 2 ? '确定修改' : '提交' }}</van-button>
        </div>
    </van-form>

    <van-popup
      :style="{'min-height': '30%', height: 'auto', width: '90%', margin: '0 auto'}"
      v-model="showpop"
    >
      <div
        class="slideverify"
        v-show="isShowSlide"
      >
        <div id="verifyCodeDemo">
          <p
            id="picyzm"
            style="margin:10px"
          ></p>
            <div style="text-align:center;margin-bottom:5px;margin-right:10px;">点击图片刷新</div>
            <van-field
              autocomplete="off"
              v-model="picyzmValue"
              style="text-align:center;"
              placeholder="请输入4位验证码"
            />
            <div style="text-align: center;">
              <van-button
                style="margin:10px;width:65px;"
                size="small"
                @click="cancelVerify()"
              >取消 </van-button>
                <van-button
                  style="margin:10px;width:65px;"
                  size="small"
                  type="info"
                  @click="handleVerify()"
                >验证
                  </van-button>
            </div>
        </div>
  </div>
  </van-popup>
  <van-popup
    round
    :close-on-click-overlay="false"
    v-model:show="showPopup"
    bind:close="onClose"
  >
    <!-- <verCode
      ref="slideblock"
      @popFUNC="popFUNC"
    ></verCode> -->
      <slide-verify
        :l="42"
        :r="10"
        :w="210"
        :h="155"
        @success="onSuccess"
        @fail="onFail"
        @refresh="onRefresh"
        slider-text="向右滑动"
      ></slide-verify>
        </van-popup>
        </div>
</template>

<script>
import {Toast} from 'vant'
import {mapGetters} from 'vuex'
import SlideVerify from '@/components/slideImg'
import verCode from '@/components/verCode' //引入
import {GVerify} from '@/utils/gVerify.js'

export default {
  name: 'privacyPwd',
  data() {
    return {
      showPopup: false,
      type: 1, // 1.设置 2.重置 3.个人认证 4.企业认证
      account: '', // 手机号
      code: '', // 验证码
      privacyPwd: '', // 隐私密码
      privacyPwd2: '', // 再次输入

      isShowSlide: false,
      showpop: false,
      picyzmValue: '',
      verifyCode: null,
      showcount: true,
      count: '',
      timer: null,
      disabled: true,
      show: true
    }
  },
  components: {
    verCode,
    SlideVerify //注册组件
  },
  computed: {
    ...mapGetters(['allUserInfo']),

    disabledStatus() {
      let result
      if (this.account && this.account.length === 11) {
        result = !this.disabled
      } else {
        result = this.disabled
      }
      return result
    }
  },
  created() {
    this.type = this.$route.params.type
  },
  mounted() {
    if (!this.allUserInfo || !this.allUserInfo.account) {
      Toast('登录信息已过期，请重新登录')
    }
    this.account = this.allUserInfo.account
  },
  methods: {
    hideSlide() {
      setTimeout(() => {
        this.isShowSlide = false
      }, 500)
    },
    sendSmsCode() {
      setTimeout(() => {
        this.showpop = false
        this.getQode()
      }, 500)
    },
    async getQode() {
      // 请求参数
      const TIME_COUNT = 60

      const params = {phone: this.account, type: 4}

      const res = await this.$api.user.reqSendCode(params)

      if (res.code === 200) {
        Toast(res.data)
        if (!this.timer) {
          this.count = TIME_COUNT
          this.showcount = false

          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--
            } else {
              this.showcount = true
              clearInterval(this.timer)
              this.timer = null
            }
          }, 1000)
        }
      } else if (res.msg) {
        Toast(res.msg)
      }
    },
    sendCode(index) {
      this.getQode()
      // this.showPopup = true
    },
    popFUNC() {
      this.showPopup = false
      this.getQode()
    },
    onSuccess() {
      this.showPopup = false
      this.getQode()
    },

    //验证码
    creatGVerify() {
      //初始化验证码
      if (!this.verifyCode) {
        this.verifyCode = new GVerify({
          id: 'picyzm',
          type: 'blend'
        })
      }
    },
    handleVerify() {
      let res = this.verifyCode.validate(this.picyzmValue)
      if (res) {
        this.sendSmsCode()
      } else {
        Toast('验证码错误')
      }
    },
    cancelVerify() {
      this.showpop = false
      this.verifyCode = null
      this.picyzmValue = ''
    },

    onSubmit(values) {
      const {account, code, privacyPwd, privacyPwd2} = values
      if (privacyPwd !== privacyPwd2) {
        Toast('两次输入的隐私密码不一致!')
        return
      }

      const params = {
        account,
        code,
        newprivacypwd: privacyPwd
      }

      this.$api.user.updatePrivacyPwd(params).then(res => {
        if (res.code === 200) {
          Toast(res.data)
          if (this.type === 3) {
            // 个人认证
            this.$router.push({name: 'personalAuth'})
          } else if (this.type === 4) {
            // 企业认证
            this.$router.push({name: 'enterpriseAuth'})
          } else {
            $router.push({name: 'privacySetting'})
          }
        }
      })
    },

    // 返回上一页
    goBack() {
      if (this.type === 3 || this.type === 4) {
        // 个人认证
        this.$router.push({name: 'mine'})
      } else {
        this.$router.push({name: 'privacySetting'})
      }
    }
  }
}
</script>

<style scoped></style>
